<template>
  <div class="person">
    <ul>
      <li v-for="item in list " :key="item.id">
        {{ item.name }} ---- {{ item.age }}
      </li>
    </ul>
    <!-- {{ list }} -->
  </div>

</template>

<script setup lang="ts" name = 'FindYou'> // 相当于写了setup() {}
import {type PersonInter, type Persons} from '@/types' // 加上type表明这是个类型 
import {defineProps, withDefaults} from 'vue'

//defineProps(['a', 'b']) // 父传过来的
// 但是这个a是不能直接打印出来的 需要去接收a

//接收
// let x = defineProps(['list'])
// console.log(x);


// 只接收List
//  defineProps(['list'])

//接收list+限制类型
// defineProps<{list:Persons}>()


//接收list+限制类型+限制必要性 加上? 表示的是可传可不传
withDefaults(defineProps<{ list?: Persons }>(), {
  list: () => [{ id: '1', name: '康师傅', age: 12 }]
})

</script>

<style scoped >
  /*  加上这个scoped 只能在本vue有效  无脑加*/
  .person {
    background-color: pink;
  }

  button {
    margin: 0 5px;
  }
</style>